<template>
	<div class="root">
		<!-- 顶部导航栏 -->
		<top-nav class="main_top"></top-nav>
		<!-- 下边 -->
		<div class="main_bottom">
			<!-- 左边导航栏 -->
			<SideNav class="main_left"></SideNav>
			<!-- 工作空间 -->
			<Content class="main_workspace"></Content>
		</div>

	</div>
</template>

<script>
	const TopNav = () => import("./layout/TopNav.vue")
	const SideNav = () => import("./layout/SideNav.vue")
	const Content = () => import("./layout/Content.vue")
	export default {
		components: {
			TopNav,
			SideNav,
			Content
		}
	}
</script>

<style scoped="scoped">
	.root {
		height: 100%;
	}

	.main_top {
		width: 100%;
		height: 60px;
		background-color: #FF0000;
	}

	.main_bottom {
		width: 100%;
		height: 89%;
		display: flex;
	}

	.main_left {
		width: 200px;
		height: 100%;
		background-color: #55ff7f;
		flex-grow: 0;
	}

	.main_workspace {
		height: 100%;
		background-color: aqua;
		flex-grow: 1;
	}
</style>
